<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机练习</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#3498db">
    <link rel="apple-touch-icon" href="images/icon-192x192.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="随机练习">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>随机练习</h1>
        </header>
        
        <main class="main">
            <div class="exercise-container">
                <div class="exercise-type">
                    <button class="exercise-btn math">数学练习</button>
                    <button class="exercise-btn language">语言练习</button>
                    <button class="exercise-btn memory">记忆练习</button>
                    <button class="exercise-btn logic">逻辑练习</button>
                </div>
                
                <div class="exercise-content">
                    <div id="question-container" class="hidden">
                        <h2 id="question-title">题目</h2>
                        <p id="question-text"></p>
                        <div id="answer-container"></div>
                        <button id="submit-btn" class="hidden">提交答案</button>
                        <button id="next-btn" class="hidden">下一题</button>
                    </div>
                    
                    <div id="result-container" class="hidden">
                        <h2>练习结果</h2>
                        <p id="score"></p>
                        <p id="time-spent"></p>
                        <button id="restart-btn">重新开始</button>
                    </div>
                </div>
            </div>
        </main>
        
        <footer class="footer">
            <p>© 2024 随机练习. 保留所有权利.</p>
        </footer>
    </div>
    
    <script src="js/main.js"></script>
    <script>
        // 注册 Service Worker
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .then(registration => {
                        console.log('ServiceWorker 注册成功:', registration.scope);
                    })
                    .catch(error => {
                        console.log('ServiceWorker 注册失败:', error);
                    });
            });
        }
    </script>
</body>
</html> 